<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>testD3-20-pie.html</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <style type="text/css">
        .svg {
            border: 2px solid #fff;
            border-radius: 50%;
            padding: 5px;
        }
        body{
            background-color: #000;
        }     
    </style>
</head>

<body>

    <script type="text/javascript">
        
        var strs = "40%";

        var h = 300;
        var w = 300;
        
        var dataset = [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5];
        var str = "在线率";
        var Sun =  dataset.length * (parseInt(strs) / 100) ;

        //(1)转化数据为适合生成饼图的对象数组
        var pie = d3.layout.pie(dataset);

        var outerRadius = w / 2;//外半径
        //(7)圆环内半径
        var innerRadius = w / 3;
        //(2)用svg的path绘制弧形的内置方法
        //设置弧度的内外径，等待传入的数据生成弧度
        var arc = d3.svg.arc()
            .outerRadius(outerRadius)
            .innerRadius(innerRadius);

        var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h)
            .attr("class", "svg")

        svg.append("circle")
            // .attr("cx", 150)
            // .attr("cy", 150)

            .attr("r", 95)
            .attr("fill", "#313562");

        svg.append("circle")
            // .attr("cx", 150)
            // .attr("cy", 150)
            .attr("r", 90)
            .attr("fill", "#00043D");

        var text = svg.append("text")
            .attr("x", 150)
            .attr("y", 140)
            .attr("font-size", 25)
            .attr("text-anchor", 'middle')
            .style("fill","#F2FEFF")
            .text(str);

        var text = svg.append("text")
            .attr("x", 150)
            .attr("y", 180)
            .attr("font-size", 25)
            .attr("text-anchor", 'middle')
            .style("fill","#49F4D8")
            .text(strs);

        //(4)准备分组,把每个分组移到图表中心
        var arcs = svg.selectAll("g.arc")
            .data(pie(dataset))
            .enter()
            .append("g")
            .attr("class", "arc")
            //移到图表中心
            .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")");
        //translate(a,b)a表示横坐标起点，b表示纵坐标起点
        //(5)为组中每个元素绘制弧形路路径
        //每个g元素都追加一个path元素用绑定到这个g的数据d生成路径信息
        var cc;

        function draw() {
            arcs.append("path")
                .attr("d", arc)
                // .attr('fill','red')
                .attr('stroke', '#00053E')
                .attr('stroke-width', '15')
                //将角度转为弧度（d3使用弧度绘制）
                .attr('fill', function (d, i) {
                    if (i < Sun ) {
                        clearInterval(cc);
                        return '#4BFBDF'
                    } else {
                        return '#0d1147'
                    }
                })
        }
        cc = setInterval("draw()", 1);

    </script>

</body>

</html>